Redux Store কী এবং কিভাবে কাজ করে?

Redux Store হলো Redux এর কেন্দ্রীয় স্থান যেখানে অ্যাপ্লিকেশনের সমস্ত স্টেট (State) সংরক্ষিত থাকে। এটি Redux-এর একটি প্রধান উপাদান, যেহেতু স্টোরে থাকা স্টেটই অ্যাপ্লিকেশনটির বর্তমান অবস্থা নির্ধারণ করে। স্টোরের মাধ্যমে অ্যাপ্লিকেশনটি তার স্টেট অ্যাক্সেস করতে পারে এবং স্টেট পরিবর্তন করতে পারে। Redux স্টোরে অ্যাপ্লিকেশনের সমস্ত স্টেট একটি কেন্দ্রীভূত অবস্থানে রাখা হয়, যা ব্যবস্থাপনা এবং ডিবাগিংয়ের জন্য অত্যন্ত সুবিধাজনক।

Redux স্টোর কিভাবে কাজ করে, তা বোঝার জন্য এর বিভিন্ন ফিচার এবং প্রক্রিয়া নিয়ে আলোচনা করা প্রয়োজন।

Redux Store এর মৌলিক কাজ

1. স্টেট ধারণ করা (State Management): স্টোর অ্যাপ্লিকেশনের সমস্ত স্টেট ধারণ করে। এটি একমাত্র স্থান যেখানে অ্যাপ্লিকেশনের স্টেট সঞ্চিত থাকে। স্টোরের মাধ্যমে স্টেট পরিবর্তন বা অ্যাক্সেস করা হয়।
2. স্টেট রিডিং (Reading State): অ্যাপ্লিকেশনের যেকোনো কম্পোনেন্ট বা ফিচার স্টোর থেকে স্টেট পড়তে পারে। এইভাবে, স্টোরের স্টেটকে একাধিক কম্পোনেন্ট শেয়ার করতে পারে, ফলে স্টেটের সামঞ্জস্য বজায় থাকে।
3. স্টেট আপডেট করা (Updating State): স্টোরের স্টেট সরাসরি পরিবর্তন করা যায় না। পরিবর্তনের জন্য, অ্যাপ্লিকেশনকে একটি অ্যাকশন (Action) ডিসপ্যাচ করতে হয়, যা রিডিউসার (Reducer) ব্যবহার করে স্টেটের একটি নতুন কপি তৈরি করে। স্টোর এই নতুন স্টেট রিটার্ন করে এবং সেই অনুযায়ী অ্যাপ্লিকেশনটি আপডেট হয়।
4. স্টেট পরিবর্তনের সাবস্ক্রিপশন (Subscription): অ্যাপ্লিকেশন স্টোরের স্টেট পরিবর্তন সম্পর্কে অবহিত হতে পারে। store.subscribe() ফাংশন ব্যবহার করে, কম্পোনেন্ট বা লজিক স্টোরের স্টেট পরিবর্তন হলে ট্রিগার হতে পারে।

Redux Store তৈরি এবং কিভাবে কাজ করে?

Redux স্টোর তৈরি করতে createStore ফাংশন ব্যবহার করা হয়। এই ফাংশনটি স্টোর তৈরি করার জন্য রিডিউসার এবং অন্যান্য প্রয়োজনীয় কনফিগারেশন নেয়। সাধারণত, একটি অ্যাপ্লিকেশন একাধিক রিডিউসার থাকতে পারে, সেক্ষেত্রে combineReducers ব্যবহার করা হয়।

স্টোর তৈরি করার উদাহরণ:

import { createStore } from 'redux';

// ১. রিডিউসার ফাংশন তৈরি
function rootReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
}

// ২. স্টোর তৈরি করা
const store = createStore(rootReducer);

// ৩. স্টোরে সাবস্ক্রাইব করা (স্টেট পরিবর্তন শোনার জন্য)
store.subscribe(() => {
  console.log('State updated:', store.getState());
});

// ৪. স্টোরে একশন ডিসপ্যাচ করা
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

এখানে:

• createStore ফাংশনটি rootReducer কে নেয় এবং একটি স্টোর তৈরি করে।
• store.subscribe() ব্যবহার করে, আমরা স্টোরের স্টেট পরিবর্তনের জন্য একটি হ্যান্ডলার সেট করেছি। যেকোনো পরিবর্তন হলে, এই হ্যান্ডলার ট্রিগার হবে।
• store.dispatch() ব্যবহার করে, আমরা স্টোরে একশন পাঠাচ্ছি, যার মাধ্যমে স্টেট পরিবর্তন হবে।

Redux Store-এর প্রধান ফিচার

1. একক স্টোর (Single Store): Redux-এ শুধুমাত্র একটি স্টোর থাকে, যা অ্যাপ্লিকেশনের সমস্ত স্টেট ধারণ করে। এতে স্টেটের একাধিক কপি রাখার ঝামেলা কমে যায় এবং স্টেটের সঠিকতা বজায় থাকে।
2. স্টেট অপরিবর্তনীয়তা (Immutable State): স্টোরের স্টেট কখনোই সরাসরি পরিবর্তিত হয় না। স্টেট পরিবর্তন করতে হলে, আপনাকে একটি নতুন কপি তৈরি করতে হবে। এটি স্টেটকে অপরিবর্তনীয় (immutable) রাখে।
3. স্টেট সাবস্ক্রিপশন (State Subscription): যেকোনো কম্পোনেন্ট বা লজিক store.subscribe() এর মাধ্যমে স্টোরের স্টেট পরিবর্তনের উপর নজর রাখতে পারে। যখনই স্টেট পরিবর্তিত হয়, তখন সাবস্ক্রাইব করা ফাংশনটি ট্রিগার হবে এবং সেই অনুযায়ী কম্পোনেন্ট বা লজিক আপডেট হবে।
4. স্টেট রিডিং (Reading State): অ্যাপ্লিকেশন স্টোর থেকে সরাসরি স্টেট পড়তে পারে। আপনি store.getState() ব্যবহার করে স্টোরের বর্তমান স্টেট অ্যাক্সেস করতে পারেন।
5. একশন (Action) ডিসপ্যাচ (Dispatch): স্টোরে স্টেট পরিবর্তনের জন্য একশন ডিসপ্যাচ করতে হয়। একশনটি একটি অবজেক্ট, যা সাধারণত একটি type এবং প্রয়োজনীয় ডেটা ধারণ করে।

স্টোরের মাধ্যমে ডেটা ফ্লো

Redux-এ স্টোরের মাধ্যমে ডেটা ফ্লো একমুখী হয়। এটি নিশ্চিত করে যে, স্টেট কেবল একক জায়গা থেকে পরিবর্তিত হয় এবং প্রোগ্রামটির আচরণ সহজে পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য হয়।

ডেটা ফ্লো:

1. অ্যাকশন (Action): প্রথমে অ্যাপ্লিকেশন থেকে একটি একশন ডিসপ্যাচ করা হয় (যেমন, INCREMENT বা ADD_TODO)।
2. রিডিউসার (Reducer): রিডিউসার সেই একশনটি গ্রহণ করে এবং স্টেটের একটি নতুন কপি তৈরি করে।
3. স্টোর (Store): নতুন স্টেট স্টোরে সঞ্চিত হয়।
4. কম্পোনেন্ট: কম্পোনেন্ট বা অন্যান্য অংশ স্টোরের নতুন স্টেট রিটার্ন করে এবং UI আপডেট হয়।

সারাংশ

Redux স্টোর হলো অ্যাপ্লিকেশনের স্টেট ধারণ করার স্থান। এটি স্টেটের একক কপি রাখে এবং স্টেট পরিবর্তন করার জন্য একশন ডিসপ্যাচ করতে হয়। স্টোরে থাকা স্টেট কখনো সরাসরি পরিবর্তিত হয় না, বরং রিডিউসার ফাংশনের মাধ্যমে নতুন স্টেট তৈরি হয়। Redux স্টোর একমুখী ডেটা ফ্লো এবং অপরিবর্তনীয় স্টেট বজায় রাখে, যা অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টকে সহজ, পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য করে তোলে।